.wx-calendar-bar {
    position: absolute;
    width: 100%;
    height: 50rpx;
    bottom: 0;
    left: 0;
    background: transparent;
    z-index: 1024;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transition: all .28s ease 0s;
    opacity: 0;
    &-control {
        display: flex;
        justify-content: center;
        &-item {
            width: 25rpx;
            height: 40rpx;
            overflow: hidden;
            position: relative;
            &-bar {
                width: 60rpx;
                height: 6rpx;
                background: theme(control-bg);
                position: absolute;
                top: calc(50% - 8rpx);
            }
            &:first-child &-bar {
                transform-origin: 0 50%;
                border-radius: 4rpx 0 0 4rpx;
                left: 0;
            }
            &:last-child &-bar {
                transform-origin: 100% 50%;
                border-radius: 0 4rpx 4rpx 0;
                right: 0;
            }
        }
    }
}

.wx-calendar {
    &.load {
        .wx-calendar-bar {
            opacity: 1;
        }
    }
}